namespace webapi_day1 {

    // setInterval和clearInterval案例

    // 1. 动态倒计时
    // 假设你正在开发一个在线购物平台，需要实现一个倒计时功能来提醒用户促销活动即将结束。
    // 倒计时结束时间
    const endTime: number = new Date('2024-08-30T23:59:59').getTime();

    // 倒计时函数
    function countdown() {
        const now: number = new Date().getTime();
        const distance: number = endTime - now;

        // 计算天、小时、分钟和秒
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        // 显示倒计时
        let countdownEl = document.getElementById('countdown') as HTMLElement
        // countdownEl.innerText = `活动结束剩余时间：${distance / 1000} 秒`;
        countdownEl.innerText = `活动结束剩余时间：${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`;

        // 检查倒计时是否结束
        if (distance < 0) {
            clearInterval(intervalId);
            countdownEl.innerText = '活动已结束';
        }
    }

    // 设置定时器
    const intervalId: NodeJS.Timeout = setInterval(countdown, 1000);


    // 2.实时更新股票价格
    // 如果你正在开发一个股票交易应用，可能需要实时更新股票价格
    // 假设这是获取股票价格的函数
    function fetchStockPrice() {
        // 这里应该是异步请求获取股票价格的代码
        console.log('股票价格已更新');
    }
    // 设置定时器，每2秒更新一次股票价格
    const stockUpdateInterval: NodeJS.Timeout = setInterval(fetchStockPrice, 3000);
    console.log(stockUpdateInterval); // 2

    // 当用户关闭股票价格更新功能时，清除定时器
    let stopUpdatesEl = document.getElementById('stopUpdates') as HTMLElement
    stopUpdatesEl.addEventListener('click', () => {
        clearInterval(stockUpdateInterval);
        console.log('股票价格更新已停止');
    });


    // setTimeout和clearTimeout案例

    // 1. 登录表单的防抖

    // 存储setTimeout的变量
    let timeoutId: any;

    // 用户输入时调用的函数
    function onUsernameInput() {
        // 如果已经有一个setTimeout在运行，先清除它
        if (timeoutId) {
            clearTimeout(timeoutId);
        }

        // 设置一个新的setTimeout，300ms后执行验证用户名的函数
        timeoutId = setTimeout(() => {
            console.log('验证用户名...');
            // 实际应用中，这里可以是发送请求到服务器验证用户名的代码
        }, 300);
    }

    // 绑定输入事件
    let usernameEl = document.getElementById('username') as HTMLElement
    usernameEl.addEventListener('input', onUsernameInput);

    // 2. 延迟加载大图片或资源

    // 图片加载函数
    // function loadImage() {
    //     const img = new Image();
    //     img.src = 'large-image.jpg';
    //     img.onload = () => {
    //         console.log('图片加载完成');
    //         // 实际应用中，这里可以是将图片添加到DOM的代码
    //     };
    // }

    // // 页面加载完成后，1秒后开始加载图片
    // window.addEventListener('load', () => {
    //     const timeoutId = setTimeout(loadImage, 1000);
    // });


    // 3. 显示提示信息后自动消失

    // 显示提示信息的函数
    function showHint(message: string, duration: number) {
        const hintElement = document.getElementById('hint') as HTMLElement;
        hintElement.innerText = message;
        hintElement.style.display = 'block';

        // 设置setTimeout，duration毫秒后隐藏提示信息
        const timeoutId = setTimeout(() => {
            hintElement.style.display = 'none';
        }, duration);

        // 可以提供清除提示的方法
        return () => clearTimeout(timeoutId);
    }

    // 显示提示信息，并在5秒后自动消失
    const clearHint = showHint('操作成功！', 5000);

    // 如果需要提前清除提示，可以调用clearHint();

}